<template>
  <div class="flex items-center justify-center flex-1">
    <div class="max-w-3xl w-full">
      <div class="text-center mb-5">
        <div class="flex items-center justify-center mb-3 gap-5">
        <!-- AI 头像 -->
        <img src="http://t4hiq2jzc.hn-bkt.clouddn.com/%E5%BE%AE%E4%BF%A1%E5%9B%BE%E7%89%87_20250208182804.jpg"
        class="w-[50px] h-[50px] rounded-full items-center">

          <h1 class="text-2xl font-bold text-gray-800">今天有什么可以帮到你？</h1>
        </div>
      </div>

      <!-- 聊天输入框 -->
      <ChatInputBox
        v-model="userMessage"
        :textModels="textModels"
        @sendMessage="sendMessage"
        :minRows="2"
        :maxRows="14"
        :skeletonLoadingAnimation=false
        smartTextareaClass="bg-transparent border-none outline-none w-full text-sm pr-4 pl-6 resize-none overflow-y-auto transition-all ease-in-out duration-300"
        ></ChatInputBox>
    </div>
  </div>
</template>

<script setup>
import { onMounted, ref, watch } from 'vue'
import { newChat } from '@/api/chat'
import { useRouter } from 'vue-router'
// 导入Pinia store
import { useHistoryChatsStore } from '@/stores/historyChatsStore'
import { useChatStore } from '@/stores/chatStore'
import { findRoleTextModel } from '@/api/role'

// 获取 historyChat store
const historyChatsStore = useHistoryChatsStore()
// 获取 chat store
const chatStore = useChatStore()

const router = useRouter()

// 用户输入的消息
const userMessage = ref('')

// 文本模型
const textModels = ref([])

// 发送消息 - 跳转到对话聊天页并发送消息
const sendMessage = () => {
  if (!userMessage.value.trim()) {
    return;
  }

  // 临时保存消息的值，因为子组件中的 userMessage 会被清空
  const userMessageTemp = userMessage.value.trim();
  
  console.log('用户发送的消息: ' + userMessage.value)

  // TODO: 请求对话新建接口
  newChat(1, userMessage.value).then(res => {
    if (res.data.success) {
      // 将获取到的数据填写到 historyChat 中
      historyChatsStore.addChatHistoryMessage(res.data.data)

      // 跳转到聊天对话页面
      router.push({
        // 必须使用命名路由来跳转
        name: 'Chat',
        params: {
          // Url 中的 UUID
          chatId: res.data.data.uuid
        },
        query: {
          roleId: 1
        },
        state: {
          // 将用户在首页填入的消息，传递给 “聊天对话页”
          firstMessage: userMessageTemp
        }
      });
    }
  })
}

onMounted(() => {
    // 否则这是看板娘的创建新对话的页面，发送获取文本模型请求
    // TODO: 如果有看版娘设定该变量需要变化
    findTextModel(1)
})

// 查询该智能体文本模型
const findTextModel = async (roleId) => {
  findRoleTextModel(roleId).then(res => {

    if (res.data.success &&  res.data.data) {
      const data = res.data.data

      // 获取用户之前选择的模型
      const selectedModel = chatStore.getSelectedModel(data)

      // 设置默认选中状态
      const processedModels = data.map(model => ({
        ...model,
        // 添加选中状态
        selected: model.id === selectedModel.id
      }))

      textModels.value = processedModels
    }
  })
}
</script>

<style scoped>
</style>